<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>课程中心</title>
  <link rel="stylesheet" href="./CSS/curricylum.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    .loginOrEx{
      cursor: pointer;
      display: inline-block;
      width: 37px;
      height: 25px;
      background-color: red;

      text-align: center;
      line-height: 25px;

      background-color: skyblue;
      color: white;
      font-weight: bold;

      margin-left: 20px;
      border-radius: 5px;
    }

    .loginExit{
      background-color: red;

    }
  </style>
</head>

<body>
  <div id="app">
    <div class="zhanwei"></div>
    <div class="headbox">
      <div class="contain">
        <div class="logoBox">
          <div class="logoimage">
            <img src="./image/logo.png" style="width: 100%;height: 100%;">
          </div>
          <div class="logoText">
            <img src="./image/mynameLogo.png" style="width: 100%;height: 100%;">
          </div>
        </div>

        <div class="directionBox">

          <ul>
            <li>
              <div id="index" @click="toIndex">首页</div>
            </li>
            <li>
              <div id="raceIndex" @click="toRace">比赛中心</div>
            </li>
            <li>
              <div @click="toCourse">课程中心</div>
            </li>
            <li>
              <div @click="toUserIndex">个人中心</div>
            </li>
          </ul>
        </div>


        <div class="userBox">
          <div class="userImage">
            <img :src="userMsg.uurl" style="width: 100%;height: 100%;">
          </div>
          <div class="userName">
            {{userMsg.username}}

            <div class="loginOrEx" v-if="userMsg.username=='未登录'" @click="tologin">登录</div>
            <div class="loginOrEx loginExit" v-else @click ="exitLogin">退出</div>
          </div>
        </div>
      </div>
    </div>


    <!-- 主体区域 -->
    <div class="body">

      <div class="bodyhead">
        <div class="container" style="background-color: rgb(243,245,246);">
          <div class="bodyHead">
            <div class="bodyHeadTitle">
              <div class="titleImage">
                <img src="./image/shizhan-title.png" class="full">
              </div>

              <p class="title">真实项目实战演练</p>
            </div>

            <div class="searchCourseBox">
              <input type="text" class="courseSearch" placeholder="搜索你感兴趣的" v-model="searchCourseName">
              <div class="searcchImage" @click="searchFunction">
                <img src="./image/searchLogo.png" class="full">
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="container">
        <div class="courseList">
          <div class="courseHead">
            <div class="headPaiXue">默认排序</div>
            <div class="headPaiXue" style="background-color: rgba(233,142,70,.1);    color: #e98e46;" @click="addCourse">{{showWhat}}</div>
          </div>

          <div class="coures">
            <div class="courseItem" v-for="(item,i) in  courseList" :key="i" @click="tosubjectIndex(item.subject.sid)">
              <div class="itemHead">
                <img :src="item.subject.surl" style="width:100%;height: 100%; ">
              </div>
              <p class="courseName">{{item.subject.sname}}</p>
              <p class="courseTrait">零基础入门教学</p>
              <div class="coursePay">
                <p class="courseMoney">￥ {{item.subject.price}}</p>
                <div class="courseShopcar" @click.stop="addShopCar(item)"><span class="iconfont icon-gouwuche"
                    style="margin-right: 8px;"></span><span>加购物车</span></div>
              </div>
            </div>
          </div>
        </div>


        <div class="pagination">
          <div class="pageLast" @click="pageTolast(nowPage-1,nowIndex-1)">上一页</div>
          <div class="pageList">
            <div class="pageItem" v-for="(item,i) in pageList" :key="i" :class="{active1:nowIndex==i}"
              @click="changePage(item,i)">
              {{item}}
            </div>
          </div>
          <div class="pageNext" @click="pageTonext(nowPage+1,nowIndex+1)">下一页</div>
        </div>
      </div>

    </div>

  </div>

  <script src="./JS/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>

    const vm = new Vue({
      el: '#app',

      created(){
        const usermsg = JSON.parse(sessionStorage.getItem("user"))
        if(usermsg!=null){
          this.userMsg = usermsg

          if(usermsg.status==1){
            this.showWhat="我要授课"
          }
        }
        this.getCourseList(1,false)
      },
      data: {
        userMsg:{
          username:'未登录',
          uurl:'./image/userNologin.png'
        },
        courseList: [1, 2, 3, 4, 5, 6, 7, 8],
        pageList: [],
        totlePage: 0,
        nowPage: 1,
        nowIndex:0,
        searchCourseName:'',

        showWhat:'学习路线',

        isSearch:false
      },
      methods: {
        addCourse(){

          if(this.userMsg.status==1){
            location.href="./addCourse.html"
          }

        },
        tosubjectIndex(sid){
          location.href='./courseIndex.html?sid='+sid
        },
        searchFunction(){
          if(this.searchCourseName == ''){
            return;
          }
          else {
            this.isSearch = true
            this.pageList = []
            this.nowPage = 1
            this.nowIndex = 0
            this.getCourseList(1,true)
          }
        },
        getCourseList(pageIndex,isSearch){


          if(!isSearch){
            axios({
              method: 'post',
              url: '/Indenture/subjectList',
              data: {
                pageIndex:pageIndex
              }
            }).then((res) => {
              console.log(res.data.subjectMsg)

              this.courseList = res.data.subjectMsg
              this.totlePage = res.data.pageCount

              if(this.pageList.length==0){
                for (let i=0;i<res.data.pageCount;i++){
                  this.pageList.push(i+1)
                }
              }
            })
          }

          else {
            axios({
              method: 'post',
              url: '/Indenture/subjectListName',
              data: {
                partName:this.searchCourseName,
                pageIndex:pageIndex
              }
            }).then((res) => {
              this.courseList = res.data.subjectMsg
              this.totlePage = res.data.pageCount

              if(this.pageList.length==0){
                for (let i=0;i<res.data.pageCount;i++){
                  this.pageList.push(i+1)
                }
              }
            })
          }


        },
        exitLogin(){
          sessionStorage.removeItem("user")

          this.userMsg = {username:'未登录',uurl:'./image/userNologin.png'}
        },
        toIndex(){
          location.href='index.html'
        },
        toRace(){
          location.href='race.html'
        },
        toCourse(){
          location.href='curriculum.html'
        },
        toUserIndex(){
          location.href='userIndex.html'
        },
        tologin(){
          location.href = "./login.html"
        },

        addShopCar(goodsMsg){
          console.log(goodsMsg.subject.sid)
          const user = JSON.parse(sessionStorage.getItem('user'))
          if(user==null){
            alert("您还未登录，请先登录")
            location.href='./login.html'
          }

          else {
            axios({
              method: "post",
              url:'/Indenture/shoppingcartInsert',
              data: {
                sid:goodsMsg.subject.sid,
                uid:this.userMsg.uid
              },
            }).then((res)=>{
              console.log(res.data)
              if(res.data.status==0){
                alert(res.data.Msg)
              }
              else {
                alert("添加成功")
              }
            })
          }
        },
        pageTonext(clickPage, clickIndex) {
          console.log(clickPage,clickIndex)
          if (clickPage > this.totlePage) {
            return;
          }
          this.nowPage = clickPage
          this.nowIndex = clickIndex
          if (this.totlePage <= 8 && this.nowPage != this.totlePage) {
            return;
          }

          if (clickIndex > 3) {
            this.courseProceed(clickPage, clickIndex)
          }

          this.getCourseList(this.nowPage,this.isSearch);

        },
        pageTolast(clickPage, clickIndex) {
          if (clickPage <= 0) {
            return;
          }
          this.nowPage = clickPage
          this.nowIndex = clickIndex


          this.getCourseList(this.nowPage,this.isSearch);

          if (clickIndex <= 3) {
            this.courseBack(clickPage, clickIndex)
          }

        },
        changePage(clickPage, clickIndex) {
          this.nowPage = clickPage
          this.nowIndex = clickIndex

          console.log(clickPage)
          console.log(clickIndex)


          if (this.totlePage > 8) {
            if (clickIndex > 3) {
              this.courseProceed(clickPage, clickIndex)
            }
            else {
              this.courseBack(clickPage, clickIndex)
            }
          }

          this.getCourseList(this.nowPage,this.isSearch)

        },
        courseProceed(clickPage, clickIndex) {
          if (this.pageList[7] < this.totlePage) {
            const pianyi = clickIndex - 3
            this.pageList.forEach((item, i) => {
              this.$set(this.pageList, i, item + pianyi)
            })
            this.nowIndex = 3
            if (this.pageList[7] > this.totlePage) {
              const wucha = this.pageList[7] - this.totlePage
              this.pageList.forEach((item, i) => {
                this.$set(this.pageList, i, item - wucha)
              })
              this.nowIndex = this.nowIndex + wucha
            }

          }
          console.log("当前页" + this.nowPage)
        },
        courseBack(clickPage, clickIndex) {
          if (this.pageList[0] > 1) {
            const pianyi = 3 - clickIndex
            this.pageList.forEach((item, i) => {
              this.$set(this.pageList, i, item - pianyi)
            })
            this.nowIndex = 3
            if (this.pageList[0] < 1) {
              const wucha = 1 - this.pageList[0]
              this.pageList.forEach((item, i) => {
                this.$set(this.pageList, i, item + wucha)
              })
              this.nowIndex = this.nowIndex - wucha
            }
          }
          console.log("当前页" + this.nowPage)
        }

      }
    })
  </script>
</body>

</html>